<template>
<div>
  <div class="goBack" @click="goBack()">
    <van-icon name="arrow-left" />
    <div>返回</div>
  </div>
  <div class="one">
    <div class="one2">
      <van-cell-group>
        <van-field
          v-model="username"
          clearable
          placeholder="手机号"
        />
        <van-cell-group>
          <van-field
              v-model="password1"
              center
              clearable
              placeholder="请输入短信验证码"
            >
            <van-button @click="yanzheng" :disabled="!this.canClick" slot="button" size="small" type="primary">{{content}}</van-button>
          </van-field>
        </van-cell-group>
      </van-cell-group>
        <!-- <van-button class="btn1" :disabled="!this.canClick" v-if="Zbol" @click="yanzheng" slot="button" size="small" type="primary">{{content}}</van-button>
      <van-cell-group>
        <van-field
          v-model="password1"
          button
          placeholder="请输入手机验证码"
        />
      </van-cell-group> -->
      <van-cell-group>
         <van-field
          v-model="password"
          button
          placeholder="请输入密码"
        />
      </van-cell-group>
      <van-cell-group>
         <van-field
          v-model="password2"
          button
          placeholder="请再次输入密码"
        />
      </van-cell-group>
    </div>
    <div class="one4">
      <button @click="register()">注册</button>
    </div>
  </div>
</div>
</template>

<script>
import request from '../../static/request.js'
export default {
  name: 'register',
  data () {
    return {
      username:'',
      password:'',
      password1:'',
      password2:'',
      checked: false,
      icon: {
        normal:require('../assets/not.png'),
        active:require('../assets/yes.png')
      },
      sms: '',
      showUsePhone: false,
      showPhoneError: false,
      endTimes:0,       // 转换时间戳
      Zbol:true,
      endTime1:0, // 60秒倒计时
      totalTime: 60,    // 短信验证按钮60秒
      canClick: true, //添加canClick
      content: '发送验证码',  // 按钮里显示的内容
    }
  },
  method(){
    let aaa = this.post();
    console.log(aaa);
  },
  computed:{
    post(){
      return this.$store.state.Date;
    }
  },
  methods:{
    //  60 秒倒计时
    countDown () {
     if (!this.canClick) return  //改动的是这两行代码
     this.canClick = false
     this.content = this.totalTime + 's'
     let clock = window.setInterval(() => {
      this.totalTime--
      this.content = this.totalTime + 's'
      if (this.totalTime < 0) {
       window.clearInterval(clock)
       this.content = '重新发送验证码'
       this.totalTime = 60
       this.canClick = true  //这里重新开启
      }
     },1000)
    },
    timeEnd(){
      this.Zbol = true;
    },
    yanzheng(){
      // let dates = new Date();
      // this.endTimes = Number(Date.parse(dates) / 1000);
      // this.Zbol = false;
      // let Dates = this.$store.state.Date;
      // if(Dates == 0){
      //   this.endTime1 = this.endTimes + 60;
      //   this.$store.state.Date = 123;
      // }else if(this.endTimes - Dates > 60){
      //   this.endTime1 = this.endTimes + 60;
      //   this.$store.state.Date = this.endTimes;
      //   this.Zbol = false;
      // }else{
      //   alert('60')
      // }
       request({
        url: '?controller=simple&action=_sendMobileCode',
        method: 'get',
        params: {
          mobile: this.username
        }
      }).then(res=>{
        console.log(res.data)
        if(res.data=="手机号已经被注册"){
          this.$toast("该手机号已经注册过")
        }else if(res.data=='success'){
          this.countDown();
        }else if(res.data=='error'){
          this.$toast("请输入正确手机号")
        }
      })
    },
    register(){
      this.Zbol = false;
      let _this = this
      if(this.password == this.password2){
        request({
          url: '?controller=theapi&action=regist',
          method: 'get',
          params: {
            mobile: this.username,
            password: this.password,
            verify_code:this.password1
          }
        }).then(res=>{
          if(res.data.data.user_id){
            this.$toast("注册成功")
            _this.$router.push('/login')
          }else if(res.data.data=="手机号已经被注册"){
            console.log('1')
            this.$toast("该手机号已经注册过")
          }
          console.log(res)
        })
      }else{
        this.$toast("请确认密码一致")
      }
    },
    usePhone(){
      this.showUsePhone = true
    },
    closeUsePhone(){
      this.showUsePhone = false
    },
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
>>> .van-field__body{
  border-bottom: 1px solid #e6e6ee;
}
>>> .van-field__body input{
  height: 1rem;
}
/*手机号登录开始*/
.phone-login{
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: #ffffff;
  z-index: 99;
}
.phone-login .top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.3rem;
  font-size: 0.35rem;
}
.phone-h{
  margin: 0.66rem 0 0 11.2%;
  font-size: 0.34rem;
  font-weight: 600;
}
.phone-ex{
  margin: 2.47% 0 0 11.2%;
  font-size: 0.26rem;
}
.phone-login .top div:first-of-type{
  font-weight: 800;
}
.phone-input-box{
  display: flex;
  padding-top: 0.5rem;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.phone-input{
  position: relative;
  width: 77.33%;
  padding: 0 0 0.1rem 0;
  border-bottom: 1px solid #C7CACD;
}
.van-cell{
  padding: 0;
}
.van-hairline--top-bottom::after{
  border: none;
}
.van-button--default{
  border: none;
  color: #f52e67;
}
.phone-password{
  margin: 0.2rem 0 0 0;
  padding: 0 0 0.12rem 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fast-login{
  margin: 1.62rem 0 0 0;
}
.use-name-password{
  text-align: center;
  font-size: 0.3rem;
}
.phone-error{
  margin: 0.52rem 0 0 11.2%;
  color: #f52e67;
}
.phone-bottom{
  margin: 1.24rem 0 0 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wx-line{
  width: 14.67%;
  border: 0.01rem solid #C7CACD;
}
.else-login{
  padding: 0 0.22rem;
}
.wx-icon{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0 0 0;
}
.wx-icon img{
  width: 0.68rem;
  height: 0.68rem;
}
.btn1{
  position: absolute;
  z-index: 1123123213;
  right: 0.3rem;
  top: 1.3rem;
}
/*手机号登录结束*/


.one{
  width: 7.5rem;
  height: 13.22rem;
  background-size: 100% 100%;
  background-image: url(../assets/logobg-1.png);
  overflow: hidden;
}
.one1{
  position: absolute;
  right: 0.75rem;
  top: 2.35rem;
  color: #f52e67;
  font-size: 0.25rem;
}
.one2{
  width: 5.8rem;
  margin: 0 auto;
  margin-top: 4.3rem;
  position: relative;
}
.one2 input{
  background: #fff !important;
}
.one3{
  width: 5.8rem;
  margin: 0.6rem auto;
  margin-bottom: 0.15rem;
}
.one4{
  width: 6.95rem;
  height: 1.8rem;
  margin: 0 auto;
  background-image: url(../assets/btn-01.png);
  background-size:100% 100%;
  text-align: center;
}
.one4 button{
  width: 5.9rem;
  height: 0.8rem;
  margin-top: 0.37rem;
  border: 0rem;
  background: rgba(0, 0, 0, 0);
  text-align: center;
  color: #fff;
  font-size: 0.28rem;
}
.one5{
  width: 4.25rem;
  height: 0.25rem;
  margin: 0 auto;
  color: #c7cacd;
  position: relative;
  overflow: hidden;
}
.one5 hr{
  color: #c7cacd;
  margin-top: 0.125rem;
}
.oesp1{
  position: absolute;
  display: inline-block;
  width: 2.05rem;
  height: 0.25rem;
  background: #fff;
  top: 0;
  text-align: center;
  line-height: 0.25rem;
  left: 50%;
  margin-left: -1.025rem;
}
.one6{
  width: 2.8rem;
  height: 0.7rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
}
.one6 img{
  width: 0.7rem;
  height: 0.7rem;
}
.wang{
  position: absolute;
  bottom: 0.7rem;
  font-size: 0.25rem;
  color: #bfbfbf;
  left: 41%;
}
.jzmm{
  height: 12px;
  width: 12px;
}
.goBack{
  position: fixed;
  top: 0.2rem;
  left: 0.2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.3rem;
  color: #fff;
  z-index: 999;
}
.goBack>div{
  margin: 0 0 0 0.1rem;
}
.migs{
  position: absolute;
  width: 1.8rem;
  height: 0.75rem;
  top: 1.1rem;
  right: 0.1rem;
}
.migs img{
  width: 100%;
  height: 100%;
}
</style>
